<template>
	<view>
		<scroll-view scroll-y class="scrollPage">
			<view class="UCenter-bg">
				<image src="/static/head.png" class="png" mode="widthFix"></image>
				<view class="text-xl">ColorUI组件库
					<text class="text-df">v2.0</text>
				</view>
				<view class="margin-top-sm">
					<text>By:文晓港</text>
				</view>
				<image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif"
					mode="scaleToFill" class="gif-wave"></image>
			</view>
				
			<view class="cu-list menu card-menu  margin-top-xl shadow-lg radius">
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/user/user" hover-class="none">
						<image src="https://th.bing.com/th/id/Rd6f8307ed747d943b0bdfe74848241ea?rik=c6Wb2IpmzVU3Dw&riu=http%3a%2f%2fwww.innovadiscs.com%2fwp-content%2fuploads%2f2015%2f06%2fTeam-Champion_featured.jpg&ehk=AQ1COScrxW0tjHfRHkIBpn9AYFn2jkfKBDeXBeI4ym0%3d&risl=&pid=ImgRaw" class="png rounded-circle" mode="aspectFill"></image>
						<text class="text-grey">所属团队</text>
					</navigator>
					<view class="action text-grey">
						ggb团队
					</view>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/about/about" hover-class="none">
						<image src="/static/head.png" class="png" mode="aspectFit"></image>
						<text class="text-grey">关于扫地僧</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/logs/logs" hover-class="none">
						<text class="cuIcon-formfill text-green"></text>
						<text class="text-grey">日志</text>
					</navigator>
					
				</view>
				<view class="cu-item arrow">
					<view class="content" @click="showQrcode">
						<text class="cuIcon-appreciatefill text-red"></text>
						<text class="text-grey">赞赏支持</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="feedback">
						<text class="cuIcon-writefill text-cyan"></text>
						<text class="text-grey">意见反馈</text>
					</button>
				</view>
				<view class="cu-item">
					<view class="flex align-center  justify-center w-100">
						<text class="text-red text-lg font-weight-bold">退出登录</text>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bigIdx: 0,
				vips: [{
					bg: 'linear-gradient(94deg,rgba(192,160,105,1),rgba(233,213,172,1))',
					shadow: '0px 3px 12px 0px rgba(195,164,110,0.23)',
					title: 'ggb团队',
					subTitle: '因为热爱，所以优秀'
				},],
			}
		},
		onLoad() {
			
			
		},
		methods: {
			swiperChange(e) {
				this.bigIdx = e.detail.current
			},
			CopyLink(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.link,
					success: res => {
						uni.showToast({
							title: '已复制',
							duration: 1000,
						})
					}
				})
			},
			showModal(e) {
				this.setData({
					modalName: e.currentTarget.dataset.target
				})
			},
			hideModal(e) {
				this.setData({
					modalName: null
				})
			},
			showQrcode() {
				uni.previewImage({
					urls: ['https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1b30ea92-c5e1-4683-a255-ba99b802fe03/e8c58871-9e37-468b-89f7-15e5df18431d.png'],
					current: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1b30ea92-c5e1-4683-a255-ba99b802fe03/e8c58871-9e37-468b-89f7-15e5df18431d.png' // 当前显示图片的http链接      
				})
			}
		},
	}
</script>
<style>
	.UCenter-bg {
		background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
		background-size: cover;
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}
</style>
